<!--
 * @Description: In User Settings Edit
 * @Author: your name
 * @Date: 2019-09-23 17:35:06
 * @LastEditTime: 2021-01-08 18:29:52
 * @LastEditors: Please set LastEditors
 -->

<template>
    <div>
        <!-- <div class="header">
        <div class="leftP lf" style="font-size:16px;margin-left:15px">project:<span class="projectName">{{projectName}}</span></div>
        <div class="rightU rt">
            <span class="userName">{{userName}}</span>
            <img src="../../assets/userss.png" alt="" class="img_user">
        </div>
    </div> -->
        <div class="headerBtn1">
            <Button
                type="primary"
                style="position: relative; z-index: 55"
                @click="IssueRouter('all')"
                v-if="routeIssueBtnIsShow"
                >下发路由配置(全部)</Button
            >
            <Button
                type="primary"
                style="position: relative; z-index: 55"
                @click="IssueRouter('chose')"
                v-if="routeIssueBtnIsShow"
                >下发路由配置(所选)</Button
            >
            <!-- <Button type="primary"  style="position:relative;z-index:55" @click="opeartionManyVmPublic">下发公有脚本</Button> -->

            <Input
                suffix="ios-search"
                placeholder="请输入虚拟机名称"
                search
                v-model="virtualNameOfReach"
                @on-search="
                    vmCurrentPage = 1;
                    getVmListManage();
                "
                @on-change="
                    vmCurrentPage = 1;
                    limitingReach();
                "
                clearable
                style="width: auto; position: relative; z-index: 55"
            />
            <Input
                suffix="ios-search"
                placeholder="请输入IP"
                search
                v-model="virtualIPOfReach"
                @on-search="
                    vmCurrentPage = 1;
                    getVmListManage();
                "
                @on-change="
                    vmCurrentPage = 1;
                    limitingReach();
                "
                clearable
                style="width: auto; position: relative; z-index: 55"
            />
            <Input
                suffix="ios-search"
                placeholder="请输入设备ID"
                search
                v-model="vmCurrentId"
                @on-search="
                    vmCurrentPage = 1;
                    getVmListManage();
                "
                @on-change="
                    vmCurrentPage = 1;
                    limitingReach();
                "
                clearable
                style="width: auto; position: relative; z-index: 55"
            />
            <!-- <Input suffix="ios-search" placeholder="Enter vmType"  v-model="virtualvmTypeOfReach"  @on-search="getVmListManage"  @on-change="getVmListManage" clearable @on-clear="getVmListManage" style="width: auto;position:relative;z-index:55"/> -->
            <Input
                suffix="ios-search"
                placeholder="请输入Mac地址"
                search
                v-model="virtualMacOfReach"
                @on-search="
                    vmCurrentPage = 1;
                    getVmListManage();
                "
                @on-change="
                    vmCurrentPage = 1;
                    limitingReach();
                "
                clearable
                style="width: auto; position: relative; z-index: 55"
                v-show="controlSearchBtn"
            />
            <Input
                suffix="ios-search"
                placeholder="请输入镜像名称"
                search
                v-model="virtualImageNameOfReach"
                @on-search="
                    vmCurrentPage = 1;
                    getVmListManage();
                "
                @on-change="
                    vmCurrentPage = 1;
                    limitingReach();
                "
                clearable
                style="width: auto; position: relative; z-index: 55"
                v-show="controlSearchBtn"
            />
            <!-- <Input suffix="ios-search" placeholder="Enter Mac" search v-model="virtualMacOfReach"  @on-search="vmCurrentPage=1;getVmListManage()"  @on-change="vmCurrentPage=1;limitingReach()" clearable  style="width: auto;position:relative;z-index:55"/>
        <Input suffix="ios-search" placeholder="Enter Mac" search v-model="virtualMacOfReach"  @on-search="vmCurrentPage=1;getVmListManage()"  @on-change="vmCurrentPage=1;limitingReach()" clearable  style="width: auto;position:relative;z-index:55"/>
        <Input suffix="ios-search" placeholder="Enter Mac" search v-model="virtualMacOfReach"  @on-search="vmCurrentPage=1;getVmListManage()"  @on-change="vmCurrentPage=1;limitingReach()" clearable  style="width: auto;position:relative;z-index:55"/> -->
            <!-- <Cascader :data="vmAttributeData"    change-on-select @on-change="listenKeyChange" style="display:inline-block" placeholder="请选择key/value" @on-visible-change="getVmAttributeKey" v-show="controlSearchBtn"></Cascader> -->
            <!-- <Select filterable  v-model="virtualSystypeOfReach" filterable  style="width:180px;" clearable placeholder="请选择SysType" @on-change="vmCurrentPage=1;getVmListManage()" v-show="controlSearchBtn">
            <Option value="linux">Linux</Option>
            <Option value="windows">Windows</Option>
            <Option value="mac">Mac</Option>
            <Option value="unix">Unix</Option>
        </Select> -->
            <!-- <Select filterable  v-model="virtualvmTypeOfReach" filterable  style="width:180px;" clearable placeholder="请选择虚拟机类型" multiple @on-change="vmCurrentPage=1;getVmListManage()" v-show="controlSearchBtn">
            <Option value="SERVER">SERVER</Option>
            <Option value="CLIENT">CLIENT</Option>
            <Option value="DRT">DRT</Option>
            <Option value="FW">FIREWALL</Option>
            <Option value="PRT">PRT</Option>
            <Option value="IDS">IDS</Option>
            <Option value="DES">DES</Option>
            <Option value="WAF">WAF</Option>
        </Select> -->
            <Select filterable
                v-model="virtualNetworkIdOfReach"
                filterable
                style="width: 180px"
                clearable
                placeholder="请选择子网络"
                @on-open-change="reachNetworkList"
                @on-change="
                    vmCurrentPage = 1;
                    getVmListManage();
                "
            >
                <Option v-for="(item, index) in networkData" :key="index" :value="item.networkId">{{
                    item.networkName
                }}</Option>
            </Select>
            <!-- <Select filterable v-model="virtualNetworkIdOfReach" filterable  style="width:180px;" clearable placeholder="请选择Network"  @on-open-change="reachNetworkList"  @on-change="vmCurrentPage=1;getVmListManage()">
            <Option v-for="(item,index) in networkData" :key="index" :value="item.networkId">{{item.networkName}}</Option>
        </Select>
        <Select filterable v-model="virtualSubnetIdOfReach" filterable  style="width:180px;" clearable placeholder="请选择Subnet"  @on-open-change="reachSubnetList" @on-change="vmCurrentPage=1;getVmListManage()" v-show="controlSearchBtn">
            <Option v-for="(item,index) in subnetData" :key="index" :value="item.id">{{item.name+'--'+item.cidr}}</Option>
        </Select>
        <Select filterable v-model="virtualSegmentIdOfReach" filterable  style="width:180px;" clearable placeholder="请选择Vlan"  @on-open-change="reachSegmentList" @on-change="vmCurrentPage=1;getVmListManage()" v-show="controlSearchBtn">
            <Option v-for="(item,index) in segmentsData" :key="index" :value="item.id">{{item.name}}</Option>
        </Select> -->
            <Button
                type="primary"
                @click="
                    vmCurrentPage = 1;
                    getVmListManage();
                "
                style="position: relative; z-index: 55"
                >搜索</Button
            >

            <Button type="dashed" @click="controlSearch" :icon="controlSearchImage">{{
                controlSearchText
            }}</Button>
            <Button
                type="warning"
                @click="
                    vmCurrentPage = 1;
                    getVmListManage();
                "
                style="position: relative; z-index: 55"
                >刷新</Button
            >

            <!-- <Button type="primary" @click="taskConfigerMess = true"><Icon type="md-settings" :size="16" class="position_i"/>配置管理</Button> -->
        </div>
        <Table
            border
            ref="selection"
            :columns="vmColumnsData"
            :data="vmListDataTable"
            :stripe="true"
            :show-header="true"
            id="vmListTable"
            :height="tableHeight"
            @on-selection-change="selectTableData"
            :loading="loadingTable"
            @on-select="test"
        ></Table>
        <Page
            :total="vmTotal"
            show-sizer
            :current="vmCurrentPage"
            :page-size="vmItemPage"
            :show-total="true"
            class-name="pageStyle1"
            @on-change="switchineVmCurrentPage"
            @on-page-size-change="switchVmItemPage"
            :page-size-opts="pageItemGroup"
        />

        <!-- 虚拟机元数据 -->
        <Modal
            v-model="vmMetadata"
            title="元数据"
            ok-canel="关闭"
            ok-text="保存"
            :loading="vmMetadataLoading"
            @on-cancel="cancel"
            @on-ok="SaveMetaData"
        >
            <Tag type="dot" color="primary">虚拟机：{{ vmName }}</Tag>
            <div
                v-for="(item, key) in metadataData"
                :key="key"
                style="margin: 5px 0px; text-align: left; position: relative; width: 101%"
            >
                <Input
                    placeholder="Enter key"
                    style="width: 226px"
                    v-model="item.key"
                    clearable
                ></Input>
                <Icon type="md-remove" />
                <Input
                    placeholder="Enter value"
                    style="width: 220px"
                    v-model="item.value"
                    clearable
                ></Input>
                <Icon
                    type="md-remove-circle"
                    @click="removeMetadata(key)"
                    :size="20"
                    style="cursor: pointer"
                />
            </div>
            <div>
                <Button icon="ios-add" type="dashed" size="large" @click="handleAddMetadata"
                    >添加Metadata</Button
                >
            </div>
        </Modal>
        <!-- 批量操作虚拟机面板 -->
        <Modal v-model="vmManyPanel" width="371">
            <p slot="header" style="text-align: left">
                <span>共选择了{{ vmManyNumber }}台虚拟机</span>
            </p>
            <div>
                <div>
                    <Poptip
                        v-for="(item, index) in btnData"
                        :key="index"
                        confirm
                        title="您确定要执行此操作吗?"
                        @on-ok="okVm(item)"
                        @on-cancel="cancel"
                    >
                        <Button type="primary" ghost style="margin: 5px">{{ item }}</Button>
                    </Poptip>
                </div>
            </div>
            <div slot="footer">
                <Button type="primary" @click="vmManyPanel = false">关闭</Button>
            </div>
        </Modal>
        <!-- 端口转发列表 -->
        <Modal v-model="portListPanel" width="1200">
            <p slot="header" style="font-size: 14px; text-align: left">
                <!-- <Icon type="ios-information-circle"></Icon> -->
                <span>虚拟机：{{ vmName }}</span>
            </p>
            <div style="text-align: center">
                <div style="text-align: left; margin-bottom: 10px">
                    <Button type="primary" style="margin: 5px" @click="openPortPanel"
                        >开放端口</Button
                    >
                </div>
                <Table
                    border
                    ref="selection"
                    :columns="portTableCloums"
                    :data="portTableData"
                    :stripe="true"
                    :show-header="true"
                ></Table>
            </div>
            <div slot="footer">
                <Button type="primary" @click="portListPanel = false">关闭</Button>
            </div>
        </Modal>
        <!-- 修改密码 -->
        <Modal
            v-model="changeVmPassword"
            width="300"
            @on-cancel="cancel"
            ok-canel="关闭"
            ok-text="修改"
            @on-ok="updatePasswordVm"
        >
            <p slot="header" style="font-size: 14px; text-align: left">
                <!-- <Icon type="ios-information-circle"></Icon> -->
                <span>虚拟机：{{ vmName }}</span>
            </p>
            <div style="text-align: center">
                <Form ref="formInline" :model="formInline" :rules="ruleInline" inline>
                    <FormItem prop="user">
                        <RadioGroup
                            v-model="userNameImage"
                            v-for="(item, index) in userDataGroup"
                            :key="index"
                        >
                            <Radio :label="item">{{ item }}</Radio>
                        </RadioGroup>
                    </FormItem>
                    <FormItem prop="password">
                        <Input type="text" v-model="userPasswordImage" placeholder="密码"></Input>
                    </FormItem>
                </Form>
            </div>
            <!-- <div slot="footer">
            <Button type="primary" >保存</Button>
        </div> -->
        </Modal>
        <!-- 转发端口 -->
        <Modal
            v-model="openPort"
            title="添加"
            ok-canel="关闭"
            ok-text="保存"
            width="380"
            :loading="addPortLoading"
            @on-cancel="cancel"
            @on-ok="addPort"
        >
            <Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="80">
                <FormItem label="类型" prop="type">
                    <RadioGroup v-model="formValidate.type" @on-change="listenTypeChange">
                        <Radio label="ssh"></Radio>
                        <Radio label="rdp"></Radio>
                        <Radio label="vnc_in">vnc</Radio>
                        <Radio label="other"></Radio>
                    </RadioGroup>
                </FormItem>
                <FormItem label="other" prop="customType" v-if="disabledType">
                    <Input
                        v-model="formValidate.customType"
                        style="width: 200px"
                        placeholder="请输入其他类型"
                    ></Input>
                </FormItem>
                <FormItem label="端口" prop="port">
                    <!-- <Input  type="number" min="1"  max="65535"  ></Input> -->
                    <InputNumber
                        :min="1"
                        :value="1"
                        :max="65534"
                        v-model="formValidate.port"
                        style="width: 200px"
                    ></InputNumber>
                </FormItem>
                <FormItem label="协议" prop="protocol">
                    <RadioGroup v-model="formValidate.protocol">
                        <Radio label="tcp">TCP</Radio>
                        <Radio label="udp" :disabled="disabledprototol">UDP</Radio>
                        <Radio label="icmp" :disabled="disabledprototol">ICMP</Radio>
                        <!-- <Radio label="all" :disabled="disabledprototol">ALL</Radio> -->
                    </RadioGroup>
                </FormItem>
            </Form>
        </Modal>
        <!-- 接入选择页面 -->
        <Modal
            v-model="selectDataPanel"
            title="选择接入的IP"
            ok-canel="关闭"
            ok-text="接入"
            width="380"
            :loading="selectDataPanelLoading"
            @on-cancel="cancel"
            @on-ok="vmAccessChage"
        >
            <div>
                <RadioGroup
                    v-model="accessVmIp"
                    v-for="(item, index) in selectDataGroup"
                    :key="index"
                    @on-change="changeIpAccess"
                >
                    <Radio :label="item.ip">{{ item.ip }}</Radio>
                </RadioGroup>
            </div>
        </Modal>
        <!-- 页面loading -->
        <Spin fix v-show="isSpinShow">
            <Icon type="load-c" size="30" class="demo-spin-icon-load"></Icon>
            <div>Loading...</div>
        </Spin>
        <!-- 脚本面板 -->
        <Modal
            v-model="scriptConfigerPanel"
            :title="currentDeviceName"
            ok-canel="关闭"
            ok-text="确定"
            width="80"
            @on-cancel="cancel"
        >
            <div>
                <Table
                    border
                    :columns="scriptDataHeader"
                    :data="scriptDataList"
                    :stripe="true"
                    :show-header="true"
                ></Table>
            </div>
        </Modal>
        <!-- 下发日志 -->
        <Modal
            v-model="scriptLogPanel"
            :title="currentDeviceName"
            ok-canel="关闭"
            ok-text="确定"
            width="80"
            @on-cancel="cancel"
        >
            <div>
                <Table
                    border
                    :columns="scriptDataHeaderLog"
                    :data="scriptDataListLog"
                    :stripe="true"
                    :show-header="true"
                ></Table>
            </div>
        </Modal>
        <!-- 下发公有脚本 -->
        <Modal
            v-model="PublicPanel"
            title="下发公有脚本"
            ok-canel="关闭"
            ok-text="下发"
            width="320"
            @on-cancel="cancel"
            @on-ok="postPublicScript"
        >
            <div style="text-align: center">
                <Select filterable v-model="publicScript">
                    <Option v-for="item in publicScriptData" :value="item.id" :key="item.id">{{
                        item.name
                    }}</Option>
                </Select>
            </div>
        </Modal>
        <!-- 选择下发方式 -->
        <Modal
            v-model="selectIssue"
            title="下发配置"
            ok-canel="取消"
            ok-text="确定"
            width="380"
            :loading="selectIssueLoading"
            @on-cancel="cancel"
            @on-ok="IssueChage"
        >
            <div>
                <Form :label-width="120">
                    <FormItem label="下发方式">
                        <RadioGroup v-model="IssueType">
                            <Radio label="qga">qga</Radio>
                            <Radio label="ssh">ssh</Radio>
                        </RadioGroup>
                    </FormItem>
                    <FormItem label="自动生成脚本">
                        <RadioGroup v-model="autoPassBol">
                            <Radio label="true">是</Radio>
                            <Radio label="false">否</Radio>
                        </RadioGroup>
                    </FormItem>
                    <FormItem label="协议">
                        <RadioGroup v-model="routingProtocol">
                            <Radio label="RIP">RIP</Radio>
                            <Radio label="OSPF">OSPF</Radio>
                        </RadioGroup>
                    </FormItem>
                </Form>
            </div>
        </Modal>
    </div>
</template>

<script>
import axios from '@/libs/axios1';
// import checkMenu from '@/libs/setMenu.js';
export default {
    name: 'vmManagement',
    props: ['prjId'],
    data() {
        return {
            autoPassBol: 'true',
            PublicPanel: false,
            publicScript: '',
            publicScriptData: [],
            scriptLogPanel: false,
            scriptConfigerPanel: false,
            currentDeviceId: '',
            currentDeviceName: 'ss',
            IssueType: 'ssh',
            routingProtocol: 'OSPF',
            IssueFnc: '',
            selectIssue: false,
            selectIssueLoading: false,
            formInline: {
                user: '',
                password: '',
            },
            scriptDataHeader: [
                {
                    type: 'index',
                    align: 'center',
                    key: '',
                    width: 80,
                },
                {
                    title: '名称',
                    key: 'name',
                    align: 'center',
                    width: 150,
                },
                {
                    title: '内容',
                    key: '',
                    align: 'center',
                    render: (h, params) => {
                        let _this = this;
                        return h('div', {}, [
                            h('pre', {}, _this.toStringMethod(params.row.content)),
                        ]);
                    },
                },
                {
                    title: '创建人',
                    key: 'creatorName',
                    align: 'center',
                    width: 150,
                },
                {
                    title: '创建时间',
                    key: 'created',
                    align: 'center',
                    width: 150,
                },
                {
                    title: '操作',
                    key: 'name',
                    align: 'center',
                    width: 100,
                    render: (h, params) => {
                        let _this = this;
                        if (!params.row.ready) {
                            return h(
                                'Button',
                                {
                                    props: {
                                        type: 'primary',
                                        size: 'small',
                                        // style:{margin:'10px'}
                                    },
                                    style: {
                                        margin: '5px',
                                    },
                                    on: {
                                        click: () => {
                                            // this.modifyInfo(params)
                                            _this.switchRouterIssue(params.row.id);
                                        },
                                    },
                                },
                                '待下发'
                            );
                        }
                    },
                },
            ],
            scriptDataHeaderLog: [
                {
                    type: 'index',
                    align: 'center',
                    key: '',
                    width: 80,
                },
                {
                    title: '状态',
                    key: 'status',
                    align: 'center',
                    width: 150,
                },
                {
                    title: '内容',
                    key: '',
                    align: 'center',
                    render: (h, params) => {
                        let _this = this;
                        return h('div', {}, [
                            h('pre', {}, _this.toStringMethod(params.row.content)),
                        ]);
                    },
                },
                {
                    title: '下发人',
                    key: 'creatorName',
                    align: 'center',
                    width: 150,
                },
                {
                    title: '下发时间',
                    key: 'created',
                    align: 'center',
                    width: 150,
                },
                {
                    title: '消息',
                    key: 'errMsg',
                    align: 'center',
                    width: 200,
                },
            ],
            scriptDataList: [],
            scriptDataListLog: [],
            ruleInline: {
                user: [{ required: true, message: '请选择用户名', trigger: 'blur' }],
                password: [{ required: true, message: '请填写密码', trigger: 'blur' }],
            },
            pageItemGroup: [10, 20, 30, 40],
            isSpinShow: false,
            loadingTable: true,
            vmManyPanel: false,
            vmManyNumber: '',
            vmName: '',
            vmMetadata: false,
            vmMetadataLoading: true,
            metadataData: [
                {
                    key: '',
                    value: '',
                },
            ],
            // prjId: '',
            projectName: '',
            userName: '',
            vmTotal: 0,
            vmCurrentPage: 1,
            vmItemPage: 10,
            vmColumnsData: [
                // {
                //     type: 'expand',
                //     width: 60,
                //     align: 'center',
                //     //  "fixed": "left",
                //     render:(h,params)=>{
                //         let _this = this;
                //         params = params.row;
                //         let addresses = [];
                //         if(params.addresses){
                //             if(params.addresses.length!=0){
                //                 addresses = params.addresses.map((item)=>{
                //                     return h('div',{
                //                         style:{
                //                             // borderBottom:'1px dotted #ddd',
                //                             // paddingBottom:'10px'
                //                         }
                //                     },[
                //                         h('Divider',{},'网络信息'),
                //                         h('Span',{class:['expendSpanStyle']},[h('Label',{style:{display:'inline-block',minWidth:'50px',borderRadius:'5px',background:'#57a3f3',color:'#fff',textAlign:'center'}},'CIDR：'),item.cidr]),
                //                         h('Span',{class:['expendSpanStyle']},'portId：'+item.id),
                //                         h('Span',{class:['expendSpanStyle']},'IP：'+item.ip),
                //                         h('Span',{class:['expendSpanStyle']},'Mac：'+item.mac),
                //                         h('Span',{class:['expendSpanStyle']},'subnetId：'+item.subnetId),
                //                         h('Span',{class:['expendSpanStyle']},'subnetOsId：'+item.subnetOsId),
                //                         h('Span',{class:['expendSpanStyle']},'version：'+item.version),
                //                         h('Span',{class:['expendSpanStyle']},'vlan：'+item.vlan)
                //                     ])

                //                     // return h()
                //                 })
                //             }
                //         }
                //         addresses.push(
                //             h('div',{
                //                 style:{
                //                     // borderBottom:'1px dotted #ddd',
                //                     // paddingBottom:'10px'
                //                 }
                //             },[
                //                 h('Divider',{},'宿主机信息'),
                //                 h('Span',{class:['expendSpanStyle']},'instance：'+params.instance),
                //                 h('Span',{class:['expendSpanStyle']},'host：'+params.host),
                //                 h('Span',{class:['expendSpanStyle']},'hostIp：'+params.hostIp),
                //                 h('Span',{class:['expendSpanStyle']},'osId：'+params.osId),
                //                 h('Span',{class:['expendSpanStyle']},'zone：'+params.zone),
                //                 h('Span',{class:['expendSpanStyle']},'imageId：'+params.imageId),
                //                 h('Span',{class:['expendSpanStyle']},'flavorId：'+params.flavorId)
                //             ]),
                //             h('div',{
                //                 style:{
                //                     // borderBottom:'1px dotted #ddd',
                //                     // paddingBottom:'10px'
                //                 }
                //             },[
                //                 h('Divider',{},'资源信息'),
                //                 h('Span',{class:['expendSpanStyle']},'CPU：'+params.cpu),
                //                 h('Span',{class:['expendSpanStyle']},'DISK：'+params.disk),
                //                 h('Span',{class:['expendSpanStyle']},'RAM：'+params.ram),
                //             ])
                //         )
                //         return h('div',{style:{textAlign:'left'}},addresses)
                //     }
                // },
                {
                    type: 'selection',
                    width: 60,
                    align: 'center',
                    fixed: 'left',
                },
                {
                    title: '虚拟机名称',
                    key: 'name',
                    align: 'center',
                    sortable: true,
                    minWidth: 120,
                    fixed: 'left',
                    // render:(h,params)=>{
                    //     console.log(params)
                    // }
                },
                {
                    title: '子网络名称',
                    key: 'networkName',
                    align: 'center',
                    sortable: true,
                    minWidth: 120,
                    fixed: 'left',
                    // render:(h,params)=>{
                    //     console.log(params)
                    // }
                },
                {
                    title: '网络详细信息',
                    key: '',
                    align: 'center',
                    // render:(h,params)=>{

                    // },
                    // minWidth:700,
                    children: [
                        {
                            title: 'CIDR',
                            key: '',
                            align: 'center',
                            minWidth: 200,
                            render: (h, params) => {
                                let _this = this;
                                // let k = 0;
                                // _this.refreshIndex++;
                                // if(_this.refreshIndex>_this.vmListDataTable.length){
                                //     return;
                                // }
                                // if(this.refreshIndex>10){
                                //     return
                                // }
                                // console.log('---')
                                params = params.row;
                                let addresses = [];
                                if (params.addresses && params.addresses.length != 0) {
                                    if (params.addresses.length != 0) {
                                        params.addresses.map((item) => {
                                            if (item.ips && item.ips.length != 0) {
                                                for (let i = 0; i < item.ips.length; i++) {
                                                    addresses.push(h('div', {}, item.ips[i].cidr));
                                                }
                                            }
                                        });
                                    }
                                }
                                // console.log(addresses)
                                return h('div', {}, addresses);
                            },
                        },
                        {
                            title: 'IP',
                            key: '',
                            align: 'center',
                            sortable: true,
                            minWidth: 200,
                            render: (h, params) => {
                                // let k = 0;
                                // if(k>10){
                                //     return;
                                // }
                                let _this = this;
                                params = params.row;
                                let addresses = [];
                                if (params.addresses) {
                                    if (params.addresses.length != 0) {
                                        params.addresses.map((item) => {
                                            if (item.ips && item.ips.length != 0) {
                                                for (let i = 0; i < item.ips.length; i++) {
                                                    addresses.push(
                                                        h('div', {}, item.ips[i].ipAddress)
                                                    );
                                                }
                                            }
                                        });
                                    }
                                }
                                return h('div', {}, addresses);
                            },
                        },
                        {
                            title: 'Mac',
                            key: '',
                            align: 'center',
                            minWidth: 200,
                            render: (h, params) => {
                                // let k = 0;
                                // if(k>10){
                                //     return;
                                // }
                                let _this = this;
                                params = params.row;
                                let addresses = [];
                                if (params.addresses) {
                                    if (params.addresses.length != 0) {
                                        addresses = params.addresses.map((item) => {
                                            return h('div', {}, item.macAddress);
                                        });
                                        return h('div', {}, addresses);
                                    }
                                }
                            },
                        },
                        {
                            title: 'Version',
                            key: '',
                            align: 'center',
                            minWidth: 200,
                            render: (h, params) => {
                                // let k = 0;
                                // if(k>10){
                                //     return;
                                // }
                                let _this = this;
                                params = params.row;
                                let addresses = [];
                                if (params.addresses) {
                                    if (params.addresses.length != 0) {
                                        params.addresses.map((item) => {
                                            if (item.ips && item.ips.length != 0) {
                                                for (let i = 0; i < item.ips.length; i++) {
                                                    addresses.push(
                                                        h('div', {}, item.ips[i].ipVersion)
                                                    );
                                                }
                                            }
                                        });
                                        return h('div', {}, addresses);
                                    }
                                }
                            },
                        },
                    ],
                },
                {
                    title: '接入信息',
                    key: 'AccessInformation',
                    align: 'center',
                    minWidth: 600,
                    children: [
                        {
                            title: '用户名',
                            key: 'ausernamege',
                            align: 'center',
                            minWidth: 150,
                            render: (h, params) => {
                                // let k = 0;
                                // if(k>10){
                                //     return;
                                // }
                                let _this = this;
                                params = params.row;
                                let userNameGroup = [];
                                // params.accesses.push('gggg')
                                if (params.accesses) {
                                    if (params.accesses.length != 0) {
                                        userNameGroup = params.accesses.map((item) => {
                                            return h('div', {}, item.username);
                                        });
                                    }
                                }
                                return h('div', {}, userNameGroup);
                            },
                        },
                        {
                            title: '密码',
                            key: 'password',
                            align: 'center',
                            minWidth: 150,
                            render: (h, params) => {
                                // let k = 0;
                                // if(k>10){
                                //     return;
                                // }
                                let _this = this;
                                params = params.row;
                                let userNameGroup = [];
                                if (params.accesses) {
                                    if (params.accesses.length != 0) {
                                        userNameGroup = params.accesses.map((item) => {
                                            return h('div', {}, item.password);
                                        });
                                    }
                                }
                                return h('div', {}, userNameGroup);
                            },
                        },
                        {
                            title: '接入类型',
                            key: 'accessType',
                            align: 'center',
                            minWidth: 150,
                            render: (h, params) => {
                                // let k = 0;
                                // if(k>10){
                                //     return;
                                // }
                                let _this = this;
                                params = params.row;
                                let userNameGroup = [];
                                if (params.accesses) {
                                    if (params.accesses.length != 0) {
                                        userNameGroup = params.accesses.map((item) => {
                                            return h('div', {}, item.accessType);
                                        });
                                    }
                                }
                                return h('div', {}, userNameGroup);
                            },
                        },
                        {
                            title: '密码类型',
                            key: 'plugInType',
                            align: 'center',
                            minWidth: 150,
                            render: (h, params) => {
                                // let k = 0;
                                // if(k>10){
                                //     return;
                                // }
                                // console.log('plugInType')
                                let _this = this;
                                params = params.row;
                                let userNameGroup = [];
                                if (params.accesses) {
                                    if (params.accesses.length != 0) {
                                        userNameGroup = params.accesses.map((item) => {
                                            return h('div', {}, item.plugInType);
                                        });
                                    }
                                }
                                return h('div', {}, userNameGroup);
                            },
                        },
                    ],
                },
                // {
                //     title:'IP',
                //     key:'',
                //     align: 'center',
                //     sortable: true,
                //     minWidth:120,
                //     // "fixed": "left",
                //     render:(h,params)=>{
                //         // console.log("IP")
                //         let _this = this;
                //         let _IPGroup = [];
                //         params = params.row;
                //         // console.log(params)
                //         if(params.addresses){
                //             _IPGroup = params.addresses.map(item=>{
                //                 return h('p',{},item.ip)
                //             })
                //         }
                //         return h('div',{},_IPGroup)
                //     }
                // },
                {
                    title: '操作系统类型',
                    key: 'sysType',
                    minWidth: 150,
                    align: 'center',
                    filters: [
                        {
                            label: 'Linux',
                            value: 'linux',
                        },
                        {
                            label: 'Windows',
                            value: 'windows',
                        },
                        {
                            label: 'Mac',
                            value: 'mac',
                        },
                        {
                            label: 'Unix',
                            value: 'unix',
                        },
                    ],
                    filterMethod(value, row) {
                        console.log(value);
                        // this.virtualSystypeOfReach = value;
                        // this.getVmListManage();
                        return row.sysType == value;
                    },
                },
                {
                    title: '镜像名称',
                    key: 'imageName',
                    minWidth: 150,
                    align: 'center',
                },
                {
                    title: '主机信息',
                    key: '',
                    align: 'center',
                    // minWidth:700,
                    children: [
                        {
                            title: '主机',
                            key: 'host',
                            align: 'center',
                            minWidth: 150,
                        },
                        {
                            title: '主机IP',
                            key: 'hostIp',
                            align: 'center',
                            sortable: true,
                            minWidth: 150,
                        },
                    ],
                },
                {
                    title: '资源信息',
                    key: '',
                    align: 'center',
                    // minWidth:700,
                    children: [
                        {
                            title: 'CPU',
                            key: 'cpu',
                            sortable: true,
                            align: 'center',
                            minWidth: 120,
                        },
                        {
                            title: 'DISK(/GB)',
                            key: 'disk',
                            sortable: true,
                            align: 'center',
                            minWidth: 120,
                        },
                        {
                            title: 'RAM(/MB)',
                            key: 'ram',
                            sortable: true,
                            align: 'center',
                            minWidth: 120,
                        },
                    ],
                },

                {
                    title: '虚拟机类型',
                    key: 'vmType',
                    minWidth: 100,
                    align: 'center',
                },
                {
                    title: '虚拟化类型',
                    key: 'vzType',
                    minWidth: 100,
                    align: 'center',
                    filters: [
                        {
                            label: 'kvm',
                            value: 'kvm',
                        },
                        {
                            label: 'docker',
                            value: 'docker',
                        },
                    ],
                    filterMultiple: false,
                    filterMethod(value, row) {
                        console.log(value);
                        if (value == 'kvm') {
                            return row.vzType == 'kvm';
                        } else if (value == 'docker') {
                            return row.vzType == 'docker';
                        } else {
                        }
                    },
                },

                {
                    title: '创建时间',
                    key: 'created',
                    align: 'center',
                    sortable: true,
                    minWidth: 150,
                },
                {
                    title: '接入',
                    key: '2',
                    align: 'center',
                    width: 200,
                    fixed: 'right',
                    render: (h, params) => {
                        // console.log('Access')
                        // debugger
                        // let k = 0;
                        // if(k>10){
                        //     return;
                        // }
                        let _this = this;
                        params = params.row;
                        let accessGroup = [];
                        if (params.accesses) {
                            if (params.accesses.length != 0) {
                                accessGroup = params.accesses.map((item) => {
                                    // console.log(item)
                                    return item.accessType;
                                });
                            }
                        }
                        accessGroup.push('console');
                        function dedupe(array) {
                            return Array.from(new Set(array));
                        }
                        accessGroup = dedupe(accessGroup);
                        let SelectGroup = [];
                        SelectGroup = accessGroup.map((element, index) => {
                            // console.log(index)
                            if (index == 0) {
                                return;
                            }
                            return h(
                                'Option',
                                {
                                    props: {
                                        value: element,
                                    },
                                },
                                element
                            );
                        });
                        // console.log(SelectGroup)
                        // console.log(accessGroup)
                        SelectGroup.unshift(
                            h(
                                'Option',
                                {
                                    props: {
                                        value: '0',
                                    },
                                    class: ['emptyAccess'],
                                    style: {
                                        display: 'none',
                                    },
                                },
                                ''
                            )
                        );
                        return h(
                            'div',
                            {
                                class: ['accessType'],
                            },
                            [
                                h(
                                    'Icon',
                                    {
                                        props: {
                                            type: 'md-refresh',
                                        },
                                        attrs: {
                                            title: '刷新接入连接',
                                        },
                                        on: {
                                            click(event) {
                                                // console.log('---')
                                                _this.loadingTable = true;
                                                _this.deleteAccessAisle(params.id);
                                            },
                                        },
                                        style: {
                                            fontSize: '20px',
                                            marginRight: '10px',
                                            cursor: 'pointer',
                                        },
                                    },
                                    ''
                                ),
                                h(
                                    'Button',
                                    {
                                        props: {
                                            type: 'primary',
                                            label: '000',
                                            // loading:true
                                        },
                                        // label:'222',
                                        on: {
                                            click(evt) {
                                                // console.log()
                                                // var event = event || window.event
                                                // e = window.event || even;
                                                // target = event.target || event.srcElement;
                                                let e = window.event || evt;
                                                // var e = evt.srcElement || evt.target;
                                                console.log(e.srcElement);
                                                // e = window.event || arguments.callee.caller.arguments[0];
                                                // let versonGroup = [];
                                                // if(!event.toElement){

                                                // }
                                                // event.toElement = e.toElement || event.relatedTarget
                                                _this.selectDataGroup = [];
                                                _this.accessVmType = e.srcElement.innerText;
                                                _this.accessVmId = params.id;
                                                _this.accessVmIp = '';
                                                for (
                                                    let index = 0;
                                                    index < params.addresses.length;
                                                    index++
                                                ) {
                                                    if (params.addresses[index].version == 4) {
                                                        _this.selectDataGroup.push(
                                                            params.addresses[index]
                                                        );
                                                    }
                                                }
                                                if (_this.selectDataGroup.length > 1) {
                                                    if (
                                                        e.srcElement.innerText == 'ssh' ||
                                                        e.srcElement.innerText == 'rdp'
                                                    ) {
                                                        _this.selectDataPanel = true;
                                                    } else {
                                                        _this.loadingTable = true;
                                                        _this.vmAccess(
                                                            params.id,
                                                            e.srcElement.innerText
                                                        );
                                                    }
                                                } else {
                                                    _this.loadingTable = true;
                                                    _this.vmAccess(
                                                        params.id,
                                                        e.srcElement.innerText
                                                    );
                                                }
                                                // console.log(event.toElement.innerText)
                                                // console.log(this.label)
                                                // console.log(event);
                                            },
                                        },
                                        style: {
                                            borderRadius: '4px 0px 0px 4px',
                                        },
                                    },
                                    accessGroup[0]
                                ),
                                h(
                                    'Select',
                                    {
                                        props: {
                                            placeholder: '',
                                            transfer: true,
                                        },
                                        style: {
                                            width: '20px',
                                        },
                                        on: {
                                            'on-change': (value) => {
                                                $('.emptyAccess').click();
                                                if (value != 0) {
                                                    _this.vmAccess(params.id, value);
                                                }
                                                $('.accessType .ivu-select-placeholder').text('');
                                            },
                                        },
                                    },
                                    SelectGroup
                                ),
                            ]
                        );
                    },
                },
                {
                    title: '操作',
                    key: '',
                    align: 'center',
                    minWidth: 150,
                    fixed: 'right',
                    render: (h, params) => {
                        // let k = 0;
                        // if(k>10){
                        //     return;
                        // }
                        let _this = this;
                        params = params.row;
                        let restoreBol = null;
                        // console.log('---------sssss--')
                        // let statusVm = params.status;
                        let statusVm = '';
                        if (_this.vmGroupStatus.length != 0) {
                            _this.vmGroupStatus.forEach((element) => {
                                if (element.id == params.id) {
                                    if (element.enableCrash) {
                                        statusVm = 'MELT';
                                        // console.log('------------')
                                    } else {
                                        statusVm = element.status;
                                        restoreBol = element.lastRestorePointTime
                                            ? element.lastRestorePointTime
                                            : '';
                                        // console.log(params)
                                        //  statusVm = "MELT"
                                    }
                                }
                            });
                        }

                        // let statusVm = _this.vmGroupStatus[_this.vmIdGroupStatus.findIndex(params.id)]
                        let operationGroup = ['配置管理'];
                        let operationOption = [];
                        switch (statusVm) {
                            case 'ACTIVE':
                                operationGroup = ['关机', '重启', '挂起', '下发日志'];
                                operationGroup.push('密码', '端口转发');
                                break;
                            case 'Running':
                                operationGroup = ['关机', '重启', '挂起', '下发日志'];
                                operationGroup.push('密码', '端口转发');
                                break;
                            case 'SHUTOFF':
                                operationGroup = ['开机'];
                                operationGroup.push('密码', '创建还原点', '端口转发');
                                break;
                            case 'DOWN':
                                operationGroup = ['开机', '创建还原点'];
                                break;
                            case 'Stopped':
                                operationGroup = ['开机', '创建还原点'];
                                break;
                            case 'SUSPENDED':
                                operationGroup = ['恢复'];
                                operationGroup.push('密码', '端口转发');
                                break;
                            case 'ERROR':
                                operationGroup = ['重启', '重置状态'];
                                break;
                            case 'PAUSED':
                                operationGroup = ['取消暂停'];
                                operationGroup.push('密码', '端口转发');
                                break;
                            case 'CRUSH': //虚拟机奔溃状态
                                operationGroup = ['关机', '重启'];
                                break;
                            case 'PASSWORD': //虚拟机未知状态
                                operationGroup = ['关机'];
                                break;
                            case 'MELT': //虚拟机奔溃状态
                                operationGroup = ['重启', '创建还原点'];
                                break;
                            default:
                                operationGroup = ['关机'];
                                break;
                        }
                        // console.log(statusVm)
                        // console.log(restoreBol)
                        if (statusVm == 'SHUTOFF' && restoreBol) {
                            operationGroup.push('还原');
                        }
                        // operationGroup.unshift("脚本管理")
                        // console.log('================')
                        operationOption = operationGroup.map((item, index) => {
                            if (index == 0) {
                                // console.log('---')
                                return h(
                                    'Option',
                                    {
                                        props: { value: 0, label: 0 },
                                        class: ['falseValue' + params.id],
                                        style: { display: 'none' },
                                    },
                                    ''
                                );
                            } else {
                                return h('Option', { props: { value: item } }, item);
                            }
                        });
                        return h(
                            'div',
                            {
                                class: ['opertionVm'],
                            },
                            [
                                h(
                                    'Button',
                                    {
                                        props: {
                                            type: 'primary',
                                        },
                                        on: {
                                            click(event) {
                                                let value =
                                                    event.srcElement.children.length > 0
                                                        ? event.srcElement.children[0].innerText
                                                        : event.srcElement.innerText;
                                                console.log(value);
                                                if (value) {
                                                    if (
                                                        value == '密码' ||
                                                        value == '元数据' ||
                                                        value == '端口转发'
                                                    ) {
                                                        _this.vmSwitchTypeOperation(
                                                            params.id,
                                                            value,
                                                            params
                                                        );
                                                    } else if (value == '创建还原点') {
                                                        _this.creatVmOrigin(params.id);
                                                    } else if (value == '还原') {
                                                        _this.restoreVmOrigin(
                                                            params.id,
                                                            restoreBol
                                                        );
                                                    } else if (value == '下发日志') {
                                                        _this.currentDeviceName = params.name;
                                                        _this.getLogContent(params.id);
                                                    } else {
                                                        _this.$Modal.confirm({
                                                            title: '操作虚拟机',
                                                            content:
                                                                '您确定要对这台虚拟机' +
                                                                value +
                                                                '吗？',
                                                            onOk: () => {
                                                                _this.vmSwitchTypeOperation(
                                                                    params.id,
                                                                    value,
                                                                    params
                                                                );
                                                            },
                                                            onCancel: () => {},
                                                        });
                                                    }
                                                }
                                                return;
                                                _this.scriptConfigerPanel = true;
                                                _this.getScriptData();
                                                _this.currentDeviceId = params.id;
                                                _this.currentDeviceName = params.name;

                                                // window.openTrain("/TopoLeftFeatures/index.html#/vmHardwareCollectInfo?vmId="+params.id+'&projectId='+_this.prjId);
                                                // _this.vmSwitchTypeOperation(params.id,event.toElement.innerText)
                                                // console.log(event.toElement.innerText)
                                                // console.log(this.label)
                                                // console.log(event);
                                            },
                                        },
                                        style: {
                                            borderRadius: '4px 0px 0px 4px',
                                        },
                                    },
                                    operationGroup[0]
                                ),
                                h(
                                    'Select',
                                    {
                                        props: {
                                            placeholder: '',
                                            value: 0,
                                            transfer: true,
                                            // 'v-model':,
                                        },
                                        style: {
                                            width: '20px',
                                        },
                                        class: ['ssssssssss'],
                                        on: {
                                            'on-change': (value) => {
                                                console.log(value);
                                                if (value != 0) {
                                                    if (
                                                        value == '密码' ||
                                                        value == '元数据' ||
                                                        value == '端口转发'
                                                    ) {
                                                        _this.vmSwitchTypeOperation(
                                                            params.id,
                                                            value,
                                                            params
                                                        );
                                                    } else if (value == '创建还原点') {
                                                        _this.creatVmOrigin(params.id);
                                                    } else if (value == '还原') {
                                                        _this.restoreVmOrigin(
                                                            params.id,
                                                            restoreBol
                                                        );
                                                    } else if (value == '下发日志') {
                                                        _this.currentDeviceName = params.name;
                                                        _this.getLogContent(params.id);
                                                    } else {
                                                        _this.$Modal.confirm({
                                                            title: '操作虚拟机',
                                                            content:
                                                                '您确定要对这台虚拟机' +
                                                                value +
                                                                '吗？',
                                                            onOk: () => {
                                                                _this.vmSwitchTypeOperation(
                                                                    params.id,
                                                                    value,
                                                                    params
                                                                );
                                                            },
                                                            onCancel: () => {},
                                                        });
                                                    }
                                                }
                                                $('.falseValue' + params.id).click();
                                                // $('.ssssssssss').val(0)
                                                // _this.$nextTick(()=>{
                                                //     $('.falseValue').click();
                                                // })

                                                // _this.selectValue = '';
                                                $('.opertionVm .ivu-select-placeholder').text('');
                                                // console.log( $('.falseValue').length)
                                                // $('.falseValue').click();
                                            },
                                        },
                                    },
                                    operationOption
                                ),
                            ]
                        );
                    },
                },
                // {
                //     title:'待下发脚本',
                //     key:'',
                //     align:'center',
                //     fixed:'right',
                //      minWidth:150,
                //     render:(h,params)=>{
                //         if(params.row.routerScript){
                //             return h('div',{},params.row.routerScript.scriptName);
                //         }
                //     }
                // },
                {
                    title: '虚拟机状态',
                    key: 'status',
                    align: 'center',
                    minWidth: 150,
                    fixed: 'right',
                    render: (h, params) => {
                        // let k = 0;
                        // k++;
                        // if(k>this.vmListDataTable.length){
                        //     return;
                        // }
                        // console.log('----')
                        let _this = this;
                        params = params.row;
                        let statusVm = '',
                            fontColor = '',
                            statusLoading = false,
                            ErrorMesage = '';
                        if (_this.vmGroupStatus.length != 0) {
                            _this.vmGroupStatus.forEach(function (element,i) {
                                if (element.id == params.id) {
                                    if (element.enableCrash) {
                                        statusVm = 'MELT';
                                        ErrorMesage = element.crashMsg;
                                    } else {
                                        statusVm = element.status;
                                        ErrorMesage = '';
                                        // statusVm  =  "MELT";
                                    }
                                    statusLoading = element.loading;
                                    return;
                                }
                            });
                            // _this.vmGroupStatus.forEach(element => {
                            //     if(element.id==params.id){
                            //         statusVm  =  element.status;
                            //         statusLoading = element.loading
                            //     }
                            // });
                        }
                        // let statusVmGroup = [
                        //     {'ACTIVE':'运行中/#43CD80/false'},{'Running':'运行中/#43CD80/false'},{'SHUTOFF':'已关机/#f00/false'},
                        //     {'DOWN':'已关机/#f00/false'},{'Stopped':'已停止/#f00/false'},{'SUSPENDED':'已挂起/#f00/false'},
                        //     {'ERROR':'运行ERROR/#f00/false'},{'PAUSED':'已暂停/#43CD80/false'},{'CRUSH':'运行ERROR/#f00/false'},
                        //     {'UNKNOWN':'运行ERROR/#f00/false'},{'powering-off':'关机中/#57a3f3/true'},{'powering-on':'启动中/#57a3f3/true'},
                        //     {'rebuilding':'重置中/#57a3f3/true'},{'rebooting-hard':'重启中/#57a3f3/true'},{'supending':'挂起中/#57a3f3/true'},
                        //     {'resuming':'恢复中/#57a3f3/true'},{'pausing':'暂停中/#57a3f3/true'},{'unpausing':'启动中/#57a3f3/true'},
                        // ]
                        let statusVmGroup = {
                            ACTIVE: '运行中/#43CD80/false/alRunning.png',
                            Running: '运行中/#43CD80/false/alRunning.png',
                            SHUTOFF: '已关机/#f00/false/alOff.png',
                            DOWN: '已关机/#f00/false/alOff.png',
                            Stopped: '已停止/#f00/false/alStop.png',
                            SUSPENDED: '已挂起/#f00/false/alSuspend.png',
                            ERROR: '运行ERROR/#f00/false/runningError.png',
                            PAUSED: '已暂停/#43CD80/false/alPause.png',
                            CRUSH: '运行ERROR/#f00/false/runningError.png',
                            UNKNOWN: '运行ERROR/#f00/false/runningError.png',
                            'powering-off': '关机中/#57a3f3/true',
                            'powering-on': '启动中/#57a3f3/true',
                            rebuilding: '重置中/#57a3f3/true',
                            rebooting_hard: '重启中/#57a3f3/true',
                            suspending: '挂起中/#57a3f3/true',
                            resuming: '恢复中/#57a3f3/true',
                            pausing: '暂停中/#57a3f3/true',
                            unpausing: '启动中/#57a3f3/true',
                            MELT: '已崩溃/#f00/false/runningError.png',
                            'restore-point-creating': '创建中/#57a3f3/true',
                        };
                        if (!statusVmGroup[statusVm]) {
                            statusVmGroup[statusVm] = '进行中/#43CD80/true';
                        }
                        let _iamgeName =
                            statusVmGroup[statusVm].split('/')[2] == 'false'
                                ? './static/' + statusVmGroup[statusVm].split('/')[3]
                                : '';

                        // let _loading = statusVmGroup[statusVm].split('/')[2] =="false" ? false :true;
                        // console.log(statusVmGroup[statusVm].split('/')[2])
                        return h(
                            'div',
                            {
                                style: {
                                    color: statusVmGroup[statusVm].split('/')[1],
                                },
                            },
                            [
                                h(
                                    'Button',
                                    {
                                        props: {
                                            type: 'default',
                                            // color:'default',
                                            loading:
                                                statusVmGroup[statusVm].split('/')[2] == 'false'
                                                    ? false
                                                    : true,
                                            // loading:false
                                        },
                                        attrs: {
                                            title: ErrorMesage,
                                        },
                                    },
                                    [
                                        h('Img', {
                                            attrs: { src: _iamgeName },
                                            style: {
                                                position: 'relative',
                                                bottom: '1px',
                                                right: '8px',
                                            },
                                        }),
                                        h('span', {}, statusVmGroup[statusVm].split('/')[0]),
                                    ]
                                ),
                            ]
                        );
                    },
                },
                {
                    title: '配置下发状态',
                    key: 'status',
                    align: 'center',
                    minWidth: 150,
                    fixed: 'right',
                    render: (h, params) => {
                        let _this = this;
                        let _text = null;
                        let _color = null;
                        params = params.row.routerScript;
                        if (params) {
                            if (params.status == 'success') {
                                _text = '下发成功';
                                _color = 'success';
                                // params.row._disabled = false;
                            } else if (params.status == 'running') {
                                _text = '下发中';
                                _color = 'warning';
                                // params.row._disabled = true;
                            } else {
                                // params.row._disabled = false;
                                _text = '下发失败';
                                _color = 'error';
                            }
                        } else {
                            _text = '未下发';
                            _color = 'default';
                        }

                        // let statusVm ="",fontColor = "",statusLoading = false,ErrorMesage = "";
                        // return h('div',{},params.status)
                        return h(
                            'Tag',
                            {
                                props: {
                                    color: _color,
                                },
                            },
                            _text
                        );
                    },
                },
            ],
            vmListDataTable: [],
            tableHeight: '',
            virtualNameOfReach: '',
            virtualIPOfReach: '',
            virtualSystypeOfReach: '',
            virtualKeyOfReach: '',
            virtualValueOfReach: '',
            virtualvmTypeOfReach: '',
            virtualMacOfReach: '',
            virtualImageNameOfReach: '',
            virtualNetworkIdOfReach: '',
            virtualSegmentIdOfReach: '',
            virtualSubnetIdOfReach: '',
            vmKeys: [],
            vmValues: [],
            vmIdGroupStatus: [],
            vmGroupStatus: [],
            vmPassword: '',
            vmId_: '',
            updatePasswordLoading: true,
            tableListHeight: '',
            selectValue: '',
            vmAttributeData: [],
            selectTableDataGroup: [],
            btnData: [],
            setTimeClear: '',

            portListPanel: false,
            portTableCloums: [
                {
                    title: 'forwardIP',
                    key: 'forwardIp',
                    align: 'center',
                },
                {
                    title: 'forwardPort',
                    key: 'forwardPort',
                    align: 'center',
                },
                // {
                //     title:'vmName',
                //     key:'name',
                //     align:'center'
                // },
                {
                    title: 'vmIP',
                    key: 'vmIp',
                    align: 'center',
                },
                {
                    title: 'vmPort',
                    key: 'vmPort',
                    align: 'center',
                },

                {
                    title: 'type',
                    key: 'type',
                    align: 'center',
                },
                {
                    title: 'protocal',
                    key: 'protocal',
                    align: 'center',
                },
                {
                    title: 'lastExpireTime',
                    key: 'lastExpireTime',
                    align: 'center',
                },
                {
                    title: 'createName',
                    key: 'userName',
                    align: 'center',
                },
                {
                    title: 'actions',
                    key: 'actions',
                    // align:'center',
                    render: (h, params) => {
                        let _this = this;
                        params = params.row;
                        return h(
                            'Poptip',
                            {
                                style: {},
                                props: {
                                    confirm: true,
                                    title: '您确定要删除吗？',
                                },
                                on: {
                                    'on-ok': () => {
                                        _this.deleteVmPort(params.token);
                                    },
                                    'on-cancel': () => {},
                                },
                            },
                            [
                                h(
                                    'Button',
                                    {
                                        style: {
                                            margin: '5px',
                                        },
                                        props: {
                                            type: 'error',
                                        },
                                    },
                                    '删除'
                                ),
                            ]
                        );
                    },
                },
            ],
            portTableData: [],
            openPort: false,
            addPortLoading: true,
            formValidate: {
                type: 'ssh',
                port: 22,
                protocol: 'tcp',
                customType: 'customType',
            },
            ruleValidate: {
                type: [{ required: true, message: '请选择类型', trigger: 'change' }],
                port: [{ required: true, message: '请填写端口', trigger: 'blur', type: 'number' }],
                protocol: [{ required: true, message: '请选择协议', trigger: 'change' }],
                customType: [{ required: true, message: '请输入自定义类型', trigger: 'blur' }],
            },
            disabledType: false,
            disabledprototol: true,
            accessTokenRef: '',
            setTimeoutReach: '',
            networkData: [],
            subnetData: [],
            segmentsData: [],
            refreshIndex: 0,
            vmNetworkData: [],
            controlSearchBtn: false,
            controlSearchText: '更多',
            controlSearchImage: 'ios-more',
            //接入方式增加选择面板
            selectDataPanel: false,
            selectDataGroup: [],
            selectDataPanelLoading: true,
            accessVmIp: '',
            accessVmId: '',
            accessVmType: '',
            changeVmPassword: false,
            userNameImage: '',
            userPasswordImage: '',
            userDataGroup: [],
            vmCurrentId: '',
            refreshVmData: null,
            opeartionManyVmAllTimer: null,
            opeartionManyVmTimer: null,
            isChange: false,
            routeIssueBtnIsShow: true,
        };
    },
    created() {
        this.userName = localStorage.nickName;
        // this.prjId = this.$route.query.projectId
        this.vmCurrentPage = sessionStorage.getItem('vmCurrentPage')
            ? Number(sessionStorage.getItem('vmCurrentPage'))
            : 1;
        this.vmItemPage = sessionStorage.getItem('vmItemPage')
            ? Number(sessionStorage.getItem('vmItemPage'))
            : 10;
        // this.tableHeight = $(window).height() - 262;
        // console.log(this.$refs)
        // this.prjId = 'cd8ced77c2104b8897ad0fd70bfd7dff';
        this.getVmListManage();
        // this.getVmAttributeKey();
        // this.getProjectInformation();
        // console.log(this.getRandomPassword(6))
    },
    methods: {
        clearSearchCriteria() {
            this.vmCurrentPage = 1;
            this.vmItemPage = 10;
            this.virtualNameOfReach = '';
            this.virtualIPOfReach = '';
            this.vmCurrentId = '';
            this.virtualMacOfReach = '';
            this.virtualImageNameOfReach = '';
            this.virtualvmTypeOfReach = '';
            this.virtualNetworkIdOfReach = '';
        },
        getPublicList() {
            axios({
                url: 'topo-edit/device_scripts?type=public&projectId=' + this.prjId,
                method: 'get',
                // data:this.selectTableDataGroup.map(item=>{return item.id})
            }).then((response) => {
                if (response.code == 1) {
                    this.publicScriptData = response.data.items;
                    // this,getScriptData()
                    // this.$Message.success('下发成功')
                } else {
                    this.$Message.error(response.message);
                }
            });
        },
        postPublicScript() {
            if (!this.publicScript) {
                this.$Message.info('请选择公网脚本');
                return;
            }
            axios({
                url: 'topo-edit/device_scripts/' + this.publicScript + '/run/public',
                method: 'post',
                data: this.selectTableDataGroup.map((item) => {
                    return item.id;
                }),
            }).then((response) => {
                if (response.code == 1) {
                    this.$Message.success('下发中');
                    this.getScriptData();
                    this.getVmListManage();
                } else {
                    this.$Message.error(response.message);
                }
            });
        },
        toStringMethod(base64) {
            // var decode = atob(base64);
            // var str = decodeURI(decode);
            var str = new Buffer(base64, 'base64').toString('utf8');
            // console.log(str);
            return str;
        },
        getLogContent(id) {
            axios({
                url: 'topo-edit/device_scripts/logs?deviceId=' + id + '&projectId=' + this.prjId,
            }).then((response) => {
                if (response.code == 1) {
                    this.scriptLogPanel = true;
                    this.scriptDataListLog = response.data.items;
                } else {
                    this.$Message.error(response.message);
                }
            });
        },
        getScriptData() {
            axios({
                url:
                    'topo-edit/device_scripts?projectId=' +
                    this.prjId +
                    '&deviceId=' +
                    this.currentDeviceId,
            }).then((response) => {
                if (response.code == 1) {
                    this.scriptDataList = response.data.items;
                } else {
                    this.$Message.error(response.message);
                }
            });
        },
        switchRouterIssue(id) {
            axios({
                url: 'topo-edit/device_scripts/' + id + '/ready?deviceId=' + this.currentDeviceId,
                method: 'put',
            }).then((response) => {
                if (response.code == 1) {
                    // this.$Message.success("切换成功")
                    this.getScriptData();
                } else {
                    this.$Message.error(response.message);
                }
            });
        },
        updatePasswordVm() {
            axios({
                url: 'topo-control/servers/' + this.vmId_ + '/change-password',
                method: 'POST',
                data: {
                    id: this.vmId_,
                    password: this.userPasswordImage,
                    type: 'qga',
                    username: this.userNameImage,
                },
            }).then((response) => {
                if (response.code == 1) {
                    this.$Message.success('修改成功');
                    this.getVmListManage();
                } else {
                    this.$Message.error(response.message);
                }
            });
        },
        creatVmOrigin(vmId) {
            let _this = this;
            this.$Modal.confirm({
                title: '操作虚拟机',
                content: '您确定要创建还原点吗？',
                onOk: () => {
                    axios({
                        url: 'topo-control/servers/' + vmId + '/restore-point',
                        method: 'POST',
                    }).then((response) => {
                        if (response.code == 1) {
                            _this.$Message.success('创建成功');
                            setTimeout(() => {
                                _this.reachManyVmStatusSend(_this.vmIdGroupStatus);
                            }, 1000);
                        } else {
                            _this.$Message.error(response.message);
                        }
                    });
                },
                onCancel: () => {},
            });
        },
        restoreVmOrigin(vmId, lastRestorePointTime) {
            let _this = this;
            this.$Modal.confirm({
                title: '还原虚拟机：' + lastRestorePointTime,
                content: '您确定要还原虚拟机吗？',
                onOk: () => {
                    axios({
                        url: 'topo-control/servers/' + vmId + '/restore-point/restore',
                        method: 'PUT',
                    }).then((response) => {
                        if (response.code == 1) {
                            _this.$Message.success('还原成功');
                            _this.reachManyVmStatusSend(_this.vmIdGroupStatus);
                        } else {
                            _this.$Message.error(response.message);
                        }
                    });
                },
                onCancel: () => {},
            });
        },
        changeIpAccess(value) {
            console.log(value);
            this.accessVmIp = value;
        },
        vmAccessChage() {
            if (!this.accessVmIp) {
                this.$Message.info('请选择一个IP');
                this.selectDataPanelLoading = false;
                this.$nextTick(() => {
                    this.selectDataPanelLoading = true;
                });
                return;
            }
            let _this = this;
            axios({
                url: 'netns/access/' + this.accessVmId + '/' + this.accessVmType,
                method: 'POST',
                data: {
                    ip: this.accessVmIp,
                },
            }).then(function (response) {
                if (response.code == 1) {
                    // var urls = data.attribute.url;
                    _this.accessTokenRef = response.attribute.token;
                    // window.openTrain(response.attribute.url);
                    window.openTrain(
                        response.attribute.url + '&Authorization=' + localStorage.getItem('token')
                    );
                    _this.selectDataPanelLoading = false;
                    _this.$nextTick(() => {
                        _this.selectDataPanelLoading = true;
                    });
                } else {
                    _this.$Message.error({
                        content: response.message,
                        closable: true,
                        duration: 10,
                    });
                    _this.selectDataPanelLoading = false;
                    _this.$nextTick(() => {
                        _this.selectDataPanelLoading = true;
                    });
                }
            });
        },
        controlSearch() {
            if (this.controlSearchBtn) {
                this.controlSearchText = '更多';
                this.controlSearchImage = 'ios-more';
            } else {
                this.controlSearchText = '收起';
                this.controlSearchImage = 'ios-arrow-up';
            }
            this.controlSearchBtn = !this.controlSearchBtn;
        },
        getAccountInfo() {
            let _this = this;
            axios({
                url: '/identity/account/info',
                method: 'get',
            }).then(function (response) {
                if (response.code != '1') {
                    _this.$Message.info(response.message);
                } else {
                    let data = response.data;
                    _this.oUserName = data.nickname;
                    if (data.avatar) {
                        _this.$refs.img_user.src = data.avatar;
                    }
                }
            });
        },
        openPortPanel() {
            this.$refs['formValidate'].resetFields();
            this.openPort = true;
            this.formValidate.type = 'ssh';
            this.formValidate.port = 22;
            this.formValidate.protocol = 'tcp';
            this.disabledType = false;
        },
        addPort() {
            let _this = this;
            this.$refs['formValidate'].validate((valid) => {
                if (valid) {
                    _this.formValidate.type =
                        _this.formValidate.type == 'other'
                            ? _this.formValidate.customType
                            : _this.formValidate.type;
                    axios({
                        url: '/netns/access/' + _this.vmId_ + '/' + _this.formValidate.type,
                        method: 'post',
                        data: {
                            port: _this.formValidate.port,
                            protocal: _this.formValidate.protocol,
                            enablePortForward: true,
                        },
                    }).then((response) => {
                        if (response.code == 1) {
                            _this.reachVmPortsList(_this.vmId_);
                            _this.openPort = false;
                            _this.addPortLoading = false;
                            _this.$nextTick(() => {
                                _this.addPortLoading = true;
                            });
                        } else {
                            _this.$Message.error(response.message);
                            _this.addPortLoading = false;
                            _this.$nextTick(() => {
                                _this.addPortLoading = true;
                            });
                        }
                    });
                } else {
                    _this.addPortLoading = false;
                    _this.$nextTick(() => {
                        _this.addPortLoading = true;
                    });
                }
            });
        },
        getProjectInformation() {
            let _this = this;
            axios({
                url: 'topo-edit/project/' + _this.prjId,
            }).then(function (response) {
                if (response.code == 1) {
                    _this.projectName = response.attribute.project.projectname;
                } else {
                    _this.$Message.error(response.message);
                }
            });
        },
        cancel() {},
        SaveMetaData() {
            this.updateVmMetadata(this.vmId_);
        },
        removeMetadata(index) {
            this.metadataData.splice(index, 1);
            console.log(index);
            // alert(index)
        },
        handleAddMetadata() {
            this.metadataData.push({
                key: '',
                value: '',
            });
        },
        switchineVmCurrentPage(currentPage) {
            // console.log(currentPage)
            sessionStorage.setItem('vmCurrentPage', currentPage);
            this.vmCurrentPage = currentPage;
            this.getVmListManage();
            this.selectTableDataGroup = [];
        },
        switchVmItemPage(itemPage) {
            sessionStorage.setItem('vmItemPage', itemPage);
            this.vmItemPage = itemPage;
            this.getVmListManage();
            this.selectTableDataGroup = [];
        },
        getVmListManage(isAuto) {
            this.refreshIndex = 0;
            let _this = this;
            isAuto ? void 0 : (_this.loadingTable = true);
            let urls = 'topo-edit/device_scripts/devices/deployed?';
            if (this.virtualvmTypeOfReach) {
                let deviceGroup = this.virtualvmTypeOfReach;
                if (deviceGroup.length != 0) {
                    for (let index = 0; index < deviceGroup.length; index++) {
                        const element = deviceGroup[index];
                        if (element) {
                            urls += 'vmTypes=' + element + '&';
                        }
                    }
                }
            }
            axios({
                url: urls + 'vmTypes=DRT&vmTypes=PRT&',
                method: 'get',
                params: {
                    projectId: _this.prjId,
                    pageIndex: _this.vmCurrentPage,
                    pageSize: _this.vmItemPage,
                    sortBy: 'name',
                    order: 'asc',
                    name: _this.virtualNameOfReach,
                    ipAddress: _this.virtualIPOfReach,
                    sysType: _this.virtualSystypeOfReach,
                    id: _this.vmCurrentId,
                    macAddress: _this.virtualMacOfReach,
                    imageName: _this.virtualImageNameOfReach,
                    networkId: _this.virtualNetworkIdOfReach,
                },
            }).then(function (response) {
                if (response.code == 1) {
                    sessionStorage.setItem('vmCurrentPage', _this.vmCurrentPage);
                    _this.vmIdGroupStatus = [];
                    _this.vmTotal = response.data.total;
                    let bol = true;
                    _this.vmListDataTable = response.data.items.map((item) => {
                        if (item.routerScript) {
                            if (item.routerScript.status == 'running') {
                                bol = false;
                                item['_disabled'] = true;
                            } else {
                                item['_disabled'] = false;
                            }
                        } else {
                            item['_disabled'] = false;
                        }
                        return item;
                    });
                    if (bol) {
                        // clearTimeout(_this.refreshVmData)
                        // _this.refreshVmData = setTimeout(() => {
                        //     _this.getVmListManage();
                        // }, 2000);
                    }

                    // _this.vmListDataTable =  response.data.list.map(item=>{
                    //     item['_loading'] = false;
                    //     return item;
                    // });
                    // // console.log(_this.vmListDataTable)
                    _this.vmIdGroupStatus = response.data.items.map((item) => {
                        return item.id;
                    });
                    // _this.loadingTable = false
                    if (_this.vmIdGroupStatus.length != 0) {
                        _this.reachManyVmStatus(_this.vmIdGroupStatus);
                    }
                    _this.loadingTable = false;
                } else {
                    if (response.code != -2) {
                        _this.$Message.error(response.message);
                    }
                    _this.loadingTable = false;
                }
            });
        },
        vmAccess(vmId, accessType) {
            let _this = this;
            axios({
                url: 'netns/access/' + vmId + '/' + accessType,
                method: 'POST',
                data: {},
            }).then(function (response) {
                if (response.code == 1) {
                    // var urls = data.attribute.url;
                    _this.accessTokenRef = response.attribute.token;
                    window.openTrain(
                        response.attribute.url + '&Authorization=' + localStorage.getItem('token')
                    );
                    _this.loadingTable = false;
                } else {
                    _this.$Message.error({
                        content: response.message,
                        closable: true,
                        duration: 10,
                    });
                    _this.loadingTable = false;
                }
            });
        },
        //操作网络
        operationVm(vmId, action, batch) {
            let _this = this;
            return axios({
                url: 'topo-control/servers/' + vmId + '/action/' + action,
                method: 'POST',
            }).then(function (response) {
                if (response.code == 1) {
                    if (batch) {
                        // _this.reachManyVmStatusSend(_this.selectTableDataGroup.map(item=>{return item.id}))
                    } else {
                        _this.reachManyVmStatusSend(_this.vmIdGroupStatus);
                    }
                } else {
                    _this.$Message.error({
                        content: response.message,
                        closable: true,
                        duration: 10,
                    });
                }
            });
        },
        //重置
        rebuildVm(vmId, batch) {
            let _this = this;
            return axios({
                url: 'topo-control/servers/' + vmId + '/action/rebuild',
                method: 'POST',
            }).then(function (response) {
                if (response.code == 1) {
                    if (batch) {
                        //    _this.reachManyVmStatusSend(_this.selectTableDataGroup.map(item=>{return item.id}))
                    } else {
                        _this.reachManyVmStatusSend(_this.vmIdGroupStatus);
                    }
                } else {
                    _this.$Message.error({
                        content: response.message,
                        closable: true,
                        duration: 10,
                    });
                }
            });
        },
        //重启
        rebootVm(vmId, batch) {
            let _this = this;
            return axios({
                url: 'topo-control/servers/' + vmId + '/action/soft_restart?type=HARD',
                method: 'POST',
            }).then(function (response) {
                if (response.code == 1) {
                    if (batch) {
                        // _this.reachManyVmStatusSend(_this.selectTableDataGroup.map(item=>{return item.id}))
                    } else {
                        _this.reachManyVmStatusSend(_this.vmIdGroupStatus);
                    }
                } else {
                    _this.$Message.error({
                        content: response.message,
                        closable: true,
                        duration: 10,
                    });
                }
            });
        },
        vmSwitchTypeOperation(vmId, text, params = '', batch = '') {
            let _this = this;
            switch (text) {
                case '关机':
                    _this.operationVm(vmId, 'stop', batch);
                    break;
                case '开机':
                    _this.operationVm(vmId, 'start', batch);
                    break;
                case '重置状态':
                    _this.operationVm(vmId, 'reset-state-active', batch);
                    break;
                case '重启':
                    _this.rebootVm(vmId, batch);
                    break;
                case '重置':
                    _this.rebuildVm(vmId, batch);
                    break;
                case '挂起':
                    _this.operationVm(vmId, 'suspend', batch);
                    break;
                case '暂停':
                    _this.operationVm(vmId, 'pause', batch);
                    break;
                case '恢复':
                    _this.operationVm(vmId, 'resume', batch);
                    break;
                case '取消暂停':
                    _this.operationVm(vmId, 'unpause', batch);
                    break;
                case '密码':
                    _this.vmId_ = params.id;
                    _this.changeVmPassword = true;
                    // console.log(params);
                    _this.userPasswordImage = '';
                    if (params) {
                        _this.vmName = params.name;
                    }
                    if (params && params.accesses && params.accesses.length != 0) {
                        _this.userDataGroup = params.accesses.map((item) => {
                            return item.username;
                        });
                    }
                    _this.userNameImage = _this.userDataGroup[0]; //默认赋值一个
                    // _this.userNameGroup = params.

                    // _this.vmId_ = params.id;
                    // _this.vmPassword = "";
                    // _this.$Modal.confirm({
                    //     title:'请填写密码',
                    //     okText:'保存',
                    //     // loading:true,
                    //     // buttonLoading:true,
                    //     onOk:()=>{
                    //     //
                    //         let that = this;
                    //         if(!_this.vmPassword){
                    //             _this.$Message.info("请填写密码")
                    //             this.buttonLoading = false;
                    //             this.loading = false;
                    //            setTimeout(() => {
                    //                 that.buttonLoading = false;
                    //            }, 500);
                    //             return;
                    //         }
                    //         axios({
                    //             url:'remote/changePassword/'+vmId+'?password='+_this.vmPassword,
                    //         }).then(function(response){
                    //             if(response.code==1){
                    //                 _this.$Message.success("修改成功")
                    //                 _this.getVmListManage();

                    //             }else{
                    //                 _this.$Message.error({content:response.message,closable:true,duration:10});

                    //             }
                    //         })
                    //     },
                    //     render: (h) => {
                    //         return h('div',{
                    //             class:['kkk'],
                    //             id:'ccc',
                    //         },[h('Input',{
                    //             props: {
                    //                 value: this.value,
                    //             },
                    //             on:{
                    //                 'on-change':(event)=>{
                    //                     _this.vmPassword = event.target.value;
                    //                 }
                    //             }
                    //         })])
                    //     }
                    // })
                    break;
                case '元数据':
                    _this.vmMetadata = true;

                    _this.metadataData = [
                        {
                            key: '',
                            value: '',
                        },
                    ];
                    _this.reachVmMetaData(params.id);
                    _this.vmName = params.name;
                    _this.vmId_ = params.id;
                    break;
                case '端口转发':
                    _this.vmName = params.name;
                    _this.vmId_ = params.id;
                    _this.portTableData = [];
                    _this.portListPanel = true;
                    _this.reachVmPortsList(params.id);
                    break;
                default:
                    console.log('不识别命令：' + text);
                    break;
            }
        },
        //查询虚拟机的状态
        reachVmStatus(vmId) {
            let _this = this;
            axios({
                url: 'topo-control/servers/' + vmId + '/status',
            }).then(function (response) {
                if (response.code == 1) {
                    if (response.list[0].taskStatus != 'null') {
                        _this.reachVmStatus(vmId);
                    } else {
                        _this.getVmListManage();
                        // var status = response.list[0].status;
                    }
                } else {
                    if (response.message) {
                        _this.$Message.error({
                            content: response.message,
                            closable: true,
                            duration: 10,
                        });
                    } else {
                        _this.$Message.error({
                            content: response.message,
                            closable: true,
                            duration: 10,
                        });
                    }
                }
            });
        },
        //批量查询虚拟机状态
        reachManyVmStatus(vmIdGroup) {
            let _this = this;
            axios({
                url: 'topo-control/servers/batch_status',
                method: 'POST',
                data: vmIdGroup,
            }).then(function (response) {
                if (response.code == 1) {
                    let status_null = [];
                    let vm_status = '',
                        vm_loading = false;
                    _this.vmGroupStatus = response.list.map((item) => {
                        if (item.taskStatus != 'null') {
                            status_null.push(item.vmId);
                            vm_status = item.taskStatus;
                            vm_loading = true;
                        } else {
                            vm_status = item.status;
                            vm_loading = false;
                        }
                        return {
                            id: item.vmId,
                            status: vm_status,
                            loading: vm_loading,
                            enableCrash: item.enableCrash,
                            crashMsg: item.crashMsg ? item.crashMsg : '',
                            lastRestorePointTime: item.lastRestorePointTime
                                ? item.lastRestorePointTime
                                : '',
                        };
                    });
                    if (status_null.length != 0) {
                        console.log(status_null);
                        _this.reachManyVmStatusSend(status_null);
                    }
                } else {
                    _this.$Message.error({
                        content: response.message,
                        closable: true,
                        duration: 10,
                    });
                }
            });
        },
        reachManyVmStatusSend(vmIdGroup) {
            // console.log('----');
            let _this = this;
            clearTimeout(_this.setTimeClear);
            axios({
                url: 'topo-control/servers/batch_status',
                method: 'POST',
                data: vmIdGroup,
            }).then(function (response) {
                if (response.code == 1) {
                    let status_null = [];
                    let status_new = [];
                    let vm_status = '';
                    status_new = response.list.map((item) => {
                        if (item.taskStatus != 'null') {
                            status_null.push(item.vmId);
                            vm_status = item.taskStatus;
                            // return
                        } else {
                            vm_status = item.status;
                        }
                        return {
                            id: item.vmId,
                            status: vm_status,
                        };
                    });
                    _this.vmGroupStatus.forEach((item) => {
                        status_new.forEach((element) => {
                            if (item.id == element.id) {
                                item.status = element.status;
                            }
                        });
                    });
                    // console.log(_this.vmGroupStatus.length)
                    if (status_null.length != 0) {
                        // console.log(status_null)
                        _this.setTimeClear = setTimeout(() => {
                            // console.log('----------')
                            _this.reachManyVmStatusSend(status_null);
                        }, 3000);
                    }
                } else {
                    _this.$Message.error({
                        content: response.message,
                        closable: true,
                        duration: 10,
                    });
                }
            });
        },
        updatePassword(vmId, btnLoading) {
            let _this = this;
            if (!_this.vmPassword) {
                _this.$Message.info('请输入密码');
                btnLoading = false;
                return;
            }
            axios({
                url: 'remote/changePassword/' + vmId + '?password=' + _this.vmPassword,
            }).then(function (response) {
                if (response.code == 1) {
                    _this.$Message.success('修改成功');
                    _this.getVmListManage();
                    _this.$Modal.remove();
                    _this.updatePasswordLoading = false;
                    _this.$nextTick(() => {
                        _this.updatePasswordLoading = true;
                    });
                } else {
                    _this.$Message.error({
                        content: response.message,
                        closable: true,
                        duration: 10,
                    });
                    btnLoading = false;
                    _this.$nextTick(() => {
                        btnLoading = true;
                    });
                }
            });
        },
        //批量修改生成随机密码
        updateVmPasswordMany(vmId) {
            let _this = this;
            return axios({
                url: 'remote/changePassword/' + vmId + '?password=' + _this.getRandomPassword(6),
            }).then(function (response) {
                if (response.code == 1) {
                    // _this.$Message.success("修改成功")
                    // _this.getVmListManage();
                    // _this.$Modal.remove()
                    // _this.updatePasswordLoading = false;
                    // _this.$nextTick(()=>{
                    //     _this.updatePasswordLoading = true;
                    // })
                } else {
                    _this.$Message.error({
                        content: response.message,
                        closable: true,
                        duration: 10,
                    });
                    // btnLoading = false;
                    // _this.$nextTick(()=>{
                    //     btnLoading= true;
                    // })
                }
            });
        },
        getRandomPassword(range) {
            let str = '',
                // range = 6,
                arr = [
                    'a',
                    'b',
                    'c',
                    'd',
                    'e',
                    'f',
                    'g',
                    'h',
                    'i',
                    'j',
                    'k',
                    'l',
                    'm',
                    'n',
                    'o',
                    'p',
                    'q',
                    'r',
                    's',
                    't',
                    'u',
                    'v',
                    'w',
                    'x',
                    'y',
                    'z',
                    'A',
                    'B',
                    'C',
                    'D',
                    'E',
                    'F',
                    'G',
                    'H',
                    'I',
                    'J',
                    'K',
                    'L',
                    'M',
                    'N',
                    'O',
                    'P',
                    'Q',
                    'R',
                    'S',
                    'T',
                    'U',
                    'V',
                    'W',
                    'X',
                    'Y',
                    'Z',
                    '0',
                    '1',
                    '2',
                    '3',
                    '4',
                    '5',
                    '6',
                    '7',
                    '8',
                    '9',
                ];
            // if (randomFlag) {
            //     range = Math.round(Math.random() * (max - min)) + min;// 任意长度
            // }
            for (let i = 0; i < range; i++) {
                let pos = Math.round(Math.random() * (arr.length - 1));
                str += arr[pos];
            }
            return str;
        },
        reachVmMetaData(vmId) {
            let _this = this;
            axios({
                url: 'topo-control/servers/' + vmId + '/metadata',
                method: 'get',
            }).then(function (response) {
                if (response.code == 1) {
                    _this.metadataData = [];
                    let metadata_ = response.attribute.metadata;
                    if (JSON.stringify(metadata_) == '{}') {
                        _this.metadataData.push({
                            key: '',
                            value: '',
                        });
                    } else {
                        for (let i in metadata_) {
                            _this.metadataData.push({
                                key: i,
                                value: metadata_[i],
                            });
                        }
                    }
                } else {
                    _this.$Message.error({
                        content: response.message,
                        duration: 10,
                        closable: true,
                    });
                }
            });
        },
        updateVmMetadata(vmId) {
            let _this = this;
            let objMedata = {};
            _this.metadataData.forEach((element) => {
                objMedata[element.key] = element.value;
            });
            axios({
                url: 'topo-control/servers/' + vmId + '/metadata',
                method: 'put',
                data: objMedata,
            }).then(function (response) {
                if (response.code == 1) {
                    _this.$Message.success('保存成功');
                    _this.vmMetadata = false;
                    _this.vmMetadataLoading = false;
                    _this.$nextTick(() => {
                        _this.vmMetadataLoading = true;
                    });
                } else {
                    _this.$Message.error({
                        content: response.message,
                        closable: true,
                        duration: 10,
                    });
                    _this.vmMetadataLoading = false;
                    _this.$nextTick(() => {
                        _this.vmMetadataLoading = true;
                    });
                }
            });
        },
        deleteVmMetadata(vmId, key) {
            let _this = this;
            axios({
                url: 'topo-control/servers/' + vmId + '/metadata/' + key,
                method: 'delete',
            }).then(function (response) {
                if (response.code == 1) {
                    // _this.
                } else {
                    _this.$Message.error({
                        content: response.message,
                        closable: true,
                        duration: 10,
                    });
                }
            });
        },
        //查询虚拟机的key
        getVmAttributeKey(value) {
            if (!value) {
                return;
            }
            let _this = this;
            axios({
                url: 'topo-edit/topo/' + _this.prjId + '/attribute/tree?type=VM',
            }).then(function (response) {
                if (response.code == 1) {
                    // _this.vmKeys = []
                    if (response.attribute.result != '{}') {
                        // console.log(Object.keys(response.attribute.result))
                        _this.vmAttributeData = Object.keys(response.attribute.result).map(
                            (item) => {
                                let oneMenu = [
                                    {
                                        label: '--',
                                        value: '--',
                                    },
                                ];
                                // $.ajax({
                                //     type:"get",
                                //     contentType:"application/json",
                                //     async:false,
                                //     url: _projPath+'topo-edit/'+_this.prjId+"/attribute/key/"+item,
                                //     dataType:"json",
                                //     headers:{"Authorization":localStorage.token},
                                //     success: function (response) {
                                //  	    if(response.attribute.result.length!=0){
                                //             oneMenu = response.attribute.result.map(item=>{
                                //                 return{
                                //                     value:item,
                                //                     label:'value：'+item
                                //                 }
                                //             });
                                //         }
                                //     },
                                //     error: function () {
                                //     },
                                // });
                                return {
                                    value: item,
                                    label: 'key：' + item,
                                    children: oneMenu,
                                };
                            }
                        );
                        console.log(_this.vmKeys);
                    }
                } else {
                    if (response.code != -2) {
                        _this.$Message.error({
                            content: response.message,
                            closable: true,
                            duration: 10,
                        });
                    }
                }
            });
        },
        //通过key 查找value
        getValueByVmKey(vmAttributeKey) {
            console.log(vmAttributeKey);
            let _this = this;
            _this.vmValues = [];
            _this.virtualValueOfReach = '';
            if (!vmAttributeKey) {
                return;
            }
            axios({
                url: 'topo-edit/topo/' + _this.prjId + '/attribute/key/' + vmAttributeKey,
            }).then(function (response) {
                if (response.code == 1) {
                    if (response.attribute.result.length != 0) {
                        _this.vmValues = response.attribute.result;
                    }
                } else {
                    _this.$Message.error({
                        content: response.message,
                        closable: true,
                        duration: 10,
                    });
                }
            });
        },
        listenKeyChange(vmAttributeKey) {
            console.log(vmAttributeKey);
            let _this = this;
            // _this.vmValues = [];
            // _this.virtualValueOfReach = "";
            if (!vmAttributeKey) {
                _this.virtualKeyOfReach = '';
                _this.virtualValueOfReach = '';
                return;
            } else {
                if (vmAttributeKey.length == 1) {
                    _this.virtualKeyOfReach = vmAttributeKey[0];
                    _this.virtualValueOfReach = '';
                    axios({
                        url: 'topo-edit/topo/' + _this.prjId + '/attribute/key/' + vmAttributeKey[0],
                    }).then(function (response) {
                        if (response.code == 1) {
                            if (response.attribute.result.length != 0) {
                                // _this.vmValues = response.attribute.result;
                                for (let i = 0; i < _this.vmAttributeData.length; i++) {
                                    if (_this.vmAttributeData[i].value == vmAttributeKey[0]) {
                                        _this.vmAttributeData[i].children = [];
                                        response.attribute.result.forEach((element) => {
                                            _this.vmAttributeData[i].children.push({
                                                label: 'value：' + element,
                                                value: element,
                                            });
                                        });
                                        return;
                                    }
                                }
                            }
                        } else {
                            _this.$Message.error({
                                content: response.message,
                                closable: true,
                                duration: 10,
                            });
                        }
                    });
                } else {
                    _this.virtualKeyOfReach = vmAttributeKey[0];
                    _this.virtualValueOfReach = vmAttributeKey[1];
                }
            }
            _this.vmCurrentPage = 1;
            sessionStorage.setItem('vmCurrentPage', 1);
            _this.getVmListManage();
            // axios({
            //     url:'topo-edit/topo/'+_this.prjId+'/attribute/key/'+vmAttributeKey,
            // }).then(function(response){
            //     if(response.code==1){
            //         if(response.attribute.result.length!=0){
            //             // _this.vmAttributeData.forEach(element=>{
            //             //     if(){

            //             //     }
            //             // });
            //             for(let i=0;i<_this.vmAttributeData.length;i++){
            //                 if(_this.vmAttributeData[i].value==vmAttributeKey){
            //                     _this.vmAttributeData[i]['children'] = response.attribute.result.map(item=>{
            //                         return {
            //                             label:item,
            //                             value:item
            //                         }
            //                     });
            //                     return;
            //                 }
            //             }
            //         }
            //     }else{
            //         _this.$Message.error({content:response.message,closable:true,duration:10})
            //     }
            // })
        },
        opeartionManyVm() {
            let _this = this;
            if (this.selectTableDataGroup.length != 0) {
                // _this.loadingTable = true;
                _this.$Modal.confirm({
                    title: '下发路由配置',
                    content: '您将要对这些路由进行配置下发吗？',
                    onOk: () => {
                        _this.loadingTable = true;
                        this.isChange = false;
                        let vmIdGroup = _this.selectTableDataGroup.map((item) => {
                            return item.id;
                        });
                        let auto = this.autoPassBol == 'true' ? true : false;
                        axios({
                            url:
                                'topo-edit/device_scripts/run/private?mode=' +
                                this.IssueType +
                                '&routingProtocol=' +
                                this.routingProtocol +
                                '&autoGenerate=' +
                                auto,
                            data: vmIdGroup,
                            method: 'POST',
                        }).then((response) => {
                            if (response.code == 1) {
                                _this.$Message.success('下发中');
                                _this.loadingTable = false;
                                _this.selectIssueLoading = false;
                                _this.opeartionManyVmAllTimer = setTimeout(function () {
                                    _this.opeartionManyVmAllReach();
                                }, 1000);
                            } else {
                                _this.$Message.error(response.message);
                                _this.loadingTable = false;
                            }
                        });
                    },
                    onCancel: () => {
                        _this.loadingTable = false;
                        _this.selectIssueLoading = false;
                    },
                });

                let vmGroupStatus = [];
            } else {
                _this.$Message.info('请选择要操作的路由');
            }
        },
        IssueRouter(value) {
            if (value == 'chose' && this.selectTableDataGroup.length == 0) {
                this.$Message.info('请选择要操作的路由');
                return false;
            }
            this.selectIssue = true;
            this.IssueFnc = value;
        },
        IssueChage() {
            this.selectIssueLoading = true;
            this.selectIssue = false;
            if (this.IssueFnc == 'all') {
                this.opeartionManyVmAll();
            } else {
                this.opeartionManyVm();
            }
        },
        opeartionManyVmAll() {
            let _this = this;
            _this.$Modal.confirm({
                title: '下发路由配置',
                content: '您将要对该工程下所有路由进行配置下发吗？',
                onOk: () => {
                    // let  vmIdGroup = _this.selectTableDataGroup.map(item=>{return item.id})
                    _this.loadingTable = true;
                    this.isChange = false;
                    let auto = this.autoPassBol == 'true' ? true : false;
                    axios({
                        url:
                            'topo-edit/device_scripts/run/dynamic_route?projectId=' +
                            this.prjId +
                            '&mode=' +
                            this.IssueType +
                            '&routingProtocol=' +
                            this.routingProtocol +
                            '&autoGenerate=' +
                            auto,
                        // data:vmIdGroup,
                        method: 'POST',
                    }).then((response) => {
                        if (response.code == 1) {
                            _this.$Message.success('下发中');
                            _this.loadingTable = false;
                            // _this.getVmListManage();
                            _this.opeartionManyVmAllTimer = setTimeout(function () {
                                _this.opeartionManyVmAllReach();
                            }, 1000);
                            _this.selectIssueLoading = false;
                        } else {
                            _this.$Message.error(response.message);
                            _this.selectIssueLoading = false;
                            _this.loadingTable = false;
                        }
                    });
                },
                onCancel: () => {
                    _this.selectIssueLoading = false;
                },
            });
        },
        opeartionManyVmAllReach() {
            let _this = this;
            clearTimeout(_this.opeartionManyVmAllTimer);
            let timer = null;
            let status_success = [];
            new Promise(function (resolve, reject) {
                _this.getVmListManage('isAuto');
                let num = 0;
                timer = setInterval(function () {
                    num++;
                    if (_this.isChange) {
                        clearInterval(timer);
                        resolve();
                    }
                    if (num > 300) {
                        clearInterval(timer);
                    }
                }, 1000);
            })
                .then(function () {
                    for (let k = 0; k < _this.vmListDataTable.length; k++) {
                        console.log(_this.vmListDataTable);
                        let params = _this.vmListDataTable[k].routerScript;
                        if (
                            params &&
                            params.status &&
                            params.status != 'success' &&
                            params.status != 'failed'
                        ) {
                            status_success.push(params.status);
                        }
                    }
                })
                .then(function () {
                    console.log(status_success);
                    if (status_success.length != 0) {
                        _this.opeartionManyVmAllTimer = setTimeout(function () {
                            _this.opeartionManyVmAllReach();
                        }, 2000);
                    }
                });
        },
        opeartionManyVmPublic() {
            let _this = this;
            if (this.selectTableDataGroup.length != 0) {
                this.getPublicList();
                this.PublicPanel = true;
                // _this.loadingTable = true;
                // _this.$Modal.confirm({
                //     title:"下发个人脚本",
                //     content:"您将要对这些路由进行公有脚本下发？",
                //     onOk:()=>{
                //         let  vmIdGroup = _this.selectTableDataGroup.map(item=>{return item.id})
                //         axios({
                //             url:'topo-edit/device_scripts/run/private',
                //             data:vmIdGroup,
                //             method:'POST',
                //         }).then((response)=>{
                //             if (response.code==1) {
                //                 _this.$Message.success('下发成功')
                //             }else{
                //                 _this.$Message.error(response.message)
                //             }
                //         })
                //     },
                //     onCancel:()=>{

                //     }
                // })

                // let vmGroupStatus  = [];
            } else {
                _this.$Message.info('请选择要操作的路由');
            }
        },
        selectTableData(values) {
            this.selectTableDataGroup = values;
            // console.log(values)
        },
        testFgm(value) {
            this.selectTableDataGroup.forEach((element) => {
                this.vmSwitchTypeOperation(element.id, value, '', true);
            });
        },
        okVm(value) {
            let _this = this;
            let activeFunction = [];
            activeFunction = this.selectTableDataGroup.map((element) => {
                let vmId = element.id;
                let batch = true;
                return new Promise((resolve, reject) => {
                    switch (value) {
                        case '关机':
                            _this.operationVm(vmId, 'stop', batch).then(() => {
                                resolve();
                            });
                            break;
                        case '开机':
                            _this.operationVm(vmId, 'start', batch).then(() => {
                                resolve();
                            });
                            break;
                        case '重启':
                            _this.rebootVm(vmId, batch).then(() => {
                                resolve();
                            });
                            break;
                        case '重置':
                            _this.rebuildVm(vmId, batch).then(() => {
                                resolve();
                            });
                            break;
                        case '挂起':
                            _this.operationVm(vmId, 'suspend', batch).then(() => {
                                resolve();
                            });
                            break;
                        case '暂停':
                            _this.operationVm(vmId, 'pause', batch).then(() => {
                                resolve();
                            });
                            break;
                        case '恢复':
                            _this.operationVm(vmId, 'resume', batch).then(() => {
                                resolve();
                            });
                            break;
                        case '取消暂停':
                            _this.operationVm(vmId, 'unpause', batch).then(() => {
                                resolve();
                            });
                            break;
                        case '修改密码(系统随机生成)':
                            _this.updateVmPasswordMany(vmId).then(() => {
                                resolve();
                            });
                            // _this.operationVm(vmId,'unpause',batch).then(()=>{
                            //     resolve()
                            // })
                            break;
                        default:
                            break;
                    }
                });
                // return this.vmSwitchTypeOperation(element.id,value,'',true)
            });
            console.log(activeFunction);
            // setTimeout(() => {
            //     this.reachManyVmStatusSend(this.vmIdGroupStatus);
            // }, 1500);
            this.vmManyPanel = false;
            Promise.all(activeFunction).then(() => {
                // console.log('----------');
                _this.getVmListManage();
                // _this.reachManyVmStatusSend(_this.vmIdGroupStatus);
            });
            return;
            // let promise = new Promise(()=>{

            // }).then((value)=>{
            //     console.log(value);

            // })
            // let _this = this;
            // let group = [];
            // group = this.selectTableDataGroup.map(element=>{
            //     return _this.vmSwitchTypeOperation(element.id,value,'',true)
            // });
            // let promise = new Promise((resolve, reject) => {
            //     // let i = 0;
            //     this.selectTableDataGroup.forEach((element,index)=>{
            //         // group.push(this.vmSwitchTypeOperation(element.id,value,'',true));
            //         this.vmSwitchTypeOperation(element.id,value,'',true)
            //         // i++;
            //     });

            //     resolve();
            //     // if(i==this.selectTableDataGroup.length){
            //     //     resolve();
            //     // }
            // });
            // promise.then((value) => {
            //     console.log(value)
            //     this.reachManyVmStatusSend(this.vmIdGroupStatus);
            // }).then(()=>{
            //     this.vmManyPanel = false;
            // });
            // console.log(promise)
            // promise.then((value) => {
            //     console.log(value)
            //     this.reachManyVmStatusSend(this.vmIdGroupStatus);
            // }).then(()=>{
            //     this.vmManyPanel = false;
            // });
            // this.reachManyVmStatusSend(this.selectTableDataGroup.map(item=>{return item.id}));
            // console.log(this.vmIdGroupStatus)
            //    setTimeout(() => {

            //    }, 2000);
        },
        test(value) {
            // console.log(value)
        },
        reachVmPortsList(vmId) {
            let _this = this;
            _this.portTableData = [];
            return axios({
                url: 'netns/access/detail?vmId=' + vmId,
                method: 'get',
                // params:{
                //     vmId:vmId
                // }
            }).then((response) => {
                if (response.code == 1) {
                    // return response.attribute.result
                    response.attribute.result.pageData.forEach(function (item,i) {
                        if (item.forwardIp) {
                            _this.portTableData.push(item);
                        }
                    });
                    // _this.portTableData = response.attribute.result.pageData.filter((item)=>{
                    //     return item.forwardIP;
                    // });
                } else if (response.code == -2) {
                    _this.portTableData = [];
                } else {
                    _this.$Message.error(response.message);
                }
            });
        },
        deleteVmPort(token) {
            let _this = this;
            axios({
                url: '/netns/access/tokens/' + token,
                method: 'delete',
            }).then((response) => {
                if (response.code == 1) {
                    _this.reachVmPortsList(this.vmId_);
                } else {
                    _this.$Message.error(response.message);
                }
            });
        },
        listenTypeChange(value) {
            console.log(value);
            let _this = this;
            _this.disabledprototol = true;
            _this.disabledType = true;
            switch (value) {
                case 'ssh':
                    _this.formValidate.port = 22;
                    _this.formValidate.protocol = 'tcp';
                    _this.disabledType = false;
                    _this.formValidate.customType = 'test';
                    break;
                case 'rdp':
                    _this.formValidate.port = 3389;
                    _this.formValidate.protocol = 'tcp';
                    _this.disabledType = false;
                    _this.formValidate.customType = 'test';
                    break;
                case 'vnc_in':
                    _this.formValidate.port = 5901;
                    _this.formValidate.protocol = 'tcp';
                    _this.disabledType = false;
                    _this.formValidate.customType = 'test';
                    break;
                case 'other':
                    // _this.formValidate.port = 22
                    _this.disabledprototol = false;
                    _this.disabledType = true;
                    _this.formValidate.port = 1;
                    _this.formValidate.customType = '';
                    break;
                default:
                    break;
            }
        },
        deleteAccessAisle(vmId) {
            let _this = this;
            axios({
                url: 'netns/access/vms/' + vmId,
                method: 'delete',
            }).then((response) => {
                if (response.code == 1) {
                    _this.$Message.success('刷新成功');
                    _this.loadingTable = false;
                } else {
                    _this.$Message.success(response.message);
                    _this.loadingTable = false;
                }
            });
        },
        limitingReach() {
            let _this = this;
            clearTimeout(_this.setTimeoutReach);
            _this.setTimeoutReach = setTimeout(() => {
                _this.getVmListManage();
            }, 500);
        },
        reachNetworkList(value) {
            if (!value) {
                return;
            }
            let _this = this;
            axios({
                url: 'topo-edit/topo/project/' + _this.prjId + '/tree',
                method: 'GET',
                data: 'NW',
            }).then(function (response) {
                if (response.code == 1) {
                    _this.networkData = [];
                    let networkDataTree = response.data;
                    function getNetwork(currentNetworkData) {
                        // if(currentNetworkData.name!="rootNetwork"){
                        _this.networkData.push({
                            networkName: currentNetworkData.name,
                            networkId: currentNetworkData.id,
                        });
                        // }
                        if (
                            currentNetworkData.networks &&
                            currentNetworkData.networks.length != 0
                        ) {
                            for (let i = 0; i < currentNetworkData.networks.length; i++) {
                                getNetwork(currentNetworkData.networks[i]);
                            }
                        }
                    }
                    getNetwork(networkDataTree);
                    console.log(_this.networkData);
                } else {
                    _this.$Message.error(response.message);
                }
            });
        },
        reachSubnetList(value) {
            if (!value) {
                return;
            }
            let _this = this;
            axios({
                url: 'deploy/project/subnets?projectId=' + _this.prjId + '&page=1&rows=20000',
                method: 'GET',
            }).then(function (response) {
                if (response.code == 1) {
                    _this.subnetData = response.data.list;
                } else {
                    _this.$Message.error(response.message);
                }
            });
        },
        reachSegmentList(value) {
            console.log(value);
            if (!value) {
                return;
            }
            let _this = this;
            axios({
                url: 'deploy/project/segments?projectId=' + _this.prjId + '&page=1&rows=20000',
                method: 'GET',
            }).then(function (response) {
                if (response.code == 1) {
                    _this.segmentsData = response.data.list;
                } else {
                    _this.$Message.error(response.message);
                }
            });
        },
    },
    beforeCreate() {
        // debugger
        // console.log(_this.vmListDataTable)
        // console.log('1111');
    },
    // created(){
    //     // debugger
    //     console.log('2222')
    // },
    beforeMount() {
        // debugger
        // console.log('33333');
        //  console.log(_this.vmListDataTable)
    },
    mounted() {
        // debugger
        // this.tableListHeight = $('#vmListTable').height();
        // console.log( this.tableListHeight)
        // console.log('4444')
        //  console.log(_this.vmListDataTable)
        // this.routeIssueBtnIsShow = checkMenu.hasMenuName('routingScriptModel');
    },
    beforeUpdate() {
        // console.log('5555')
        //  console.log(_this.vmListDataTable)
    },
    updated() {
        // this.tableListHeight = $('#vmListTable').height();
        // if($('#vmListTable').height()>$(window).height() - 140){
        //     this.tableHeight = $(window).height() - 140
        // }else{
        //     // this.tableHeight = ''
        // }
        // console.log(this.tableListHeight)
        // console.log('66666')
        //  console.log(_this.vmListDataTable)
    },
    beforeDestroy() {
        // console.log('7777777')
    },
    destroyed() {
        // console.log('8888888888')
    },
    watch: {
        vmListDataTable: {
            handler(newName, oldName) {
                this.isChange = true;
                console.log('值已改变成功');
                // console.log(oldName)
                // console.log(newName)
            },
            immediate: true,
            deep: true,
        },
    },
};
</script>

<style>
/* .header{
    width: 100%;
    height: 50px;
    color:#fff;
    background: #4a5a6a;
}
.leftP{
    width: 300px;
    line-height: 50px;
    text-align: left;
    padding-left: 20px;
}
.rightU{
    width: 300px;
    line-height: 50px;
    text-align: right;
    padding-right: 20px;
}
.img_user{
    vertical-align: text-bottom;
    margin-left: 20px;
} */

.headerBtn1 {
    text-align: left;
    /* padding: 10px */
}
.pageStyle1 {
    text-align: center;
    margin-top: 15px;
}

.operation .ivu-select-arrow {
    right: 2px;
}
.operation .ivu-select-selection {
    border-radius: 0px 4px 4px 0px;
}
.accessType .ivu-select-arrow {
    right: 2px;
}
.accessType .ivu-select-selection {
    border-radius: 0px 4px 4px 0px;
}
.opertionVm .ivu-select-arrow {
    right: 2px;
}
.opertionVm .ivu-select-selection {
    border-radius: 0px 4px 4px 0px;
}
.ivu-table-wrapper {
    overflow: visible !important;
}
.ivu-tag-border.ivu-tag-closable .ivu-icon-ios-close {
    top: -2px;
}
.ivu-table-tip {
    overflow: hidden !important;
}

.expendSpanStyle {
    display: inline-block;
    margin-right: 25px;
    min-width: 300px;
}

/* .demo-spin-icon-load{
    animation: ani-demo-spin 1s linear infinite;
}
@keyframes ani-demo-spin {
   from { transform: rotate(0deg);}
   50% { transform: rotate(180deg);}
   to { transform: rotate(360deg);}
} */
/* 假如内容过长，一屏放不下，滚动条下拉覆盖不全 */
/* .ivu-spin-fix {
    position: fixed;
} */
</style>
